<template>
	<view class="flex-col page">

		<!-- 自定义导航栏 -->
		<u-navbar leftIconColor='#EAEAEA' title="申请创建商(协)会平台" titleStyle='font-weight:bold;color:white' bgColor='transparent'
			:autoBack="true">
		</u-navbar>
		<!-- end -->

		<view class="flex-col">

			<view class="flex-col justify-start relative group">
				<view class="flex-row justify-between items-center relative section">
					<image class="image_2"
						src="https://yjgs.jsonbug.com/storage/default/20250312/17421781799934063421.png" />
				</view>
			</view>

			<view class="flex-col section_6">
				<view class="flex-row items-center group_4">
					<image class="image_10"
						src="https://yjgs.jsonbug.com/storage/default/20250312/17421781799983824908.png" />
					<text class="font text_3 ml-6-5">申请信息</text>
				</view>
				<view class="flex-col group_5">
					<!-- <view class="divider"></view> -->
					<view class="flex-col group_6">
						
						<view class="flex-row justify-between items-center section_7">
							<view class="group_9">
								<text class="font_2">*</text>
								<text class="font text_6">商(协)会全称</text>
							</view>
							<view class="flex-col justify-start items-start p-15 bb" style="background-color: #F2F2F2;">
								<input v-model="formData.chamberName" class="font_3 text_5 text_7"
									placeholder="请输入商(协)会全称" />
							</view>
						</view>
						
						<view class="flex-row justify-between items-center section_7">
							<view class="group_10">
								<text class="font_4">*</text>
								<text class="font text_8">商(协)会地址</text>
							</view>
							<view class="flex-col justify-start items-start p-15 bb" style="background-color: #F2F2F2;">
								<input v-model="formData.address" class="font_3 text_5" placeholder="请输入商(协)会地址" />
							</view>
						</view>
						
						<view class="flex-row justify-between items-center section_7">
							<view class="group_7">
								<text class="font_2">*</text>
								<text class="font text_4">联系人</text>
							</view>
							<view class="flex-col justify-start items-start p-15 bb" style="background-color: #F2F2F2;">
								<input v-model="formData.name" class="font_3 text_5" placeholder="请输入联系人" />
							</view>
						</view>
						<view class="flex-row justify-between items-center section_7">
							<view class="group_8">
								<text class="font_4">*</text>
								<text class="font">联系电话</text>
							</view>
							<view class="flex-col justify-start items-start p-15 bb" style="background-color: #F2F2F2;">
								<input v-model="formData.phone" class="font_3 text_5" type="number"
									placeholder="请输入联系电话" />
							</view>
						</view>
						
						
						<view class="flex-row justify-between section_8">
							<view class="self-start font_3 text_9">
								<text>申请留言</text>
								<text class="fs-24 ml-20 c-999">(下方的内容默认为非必填项)</text>
							</view>
							<view class="self-center group_11"></view>
						</view>
						<view class="flex-col justify-start section_9">
							<view class="flex-col justify-start items-start p-15 bb" style="background-color: #F2F2F2;">
								<textarea v-model="formData.message" class="font_5 text_10" placeholder="请输入..." />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-row justify-center section_10 mt-89-5">
			<view class="flex-col justify-start items-center text-wrapper_3" @click="saveTemp">
				<text class="font_5 text_11">暂存</text>
			</view>
			<view class="flex-col justify-start items-center text-wrapper_4 ml-15" @click="submitForm"
				:class="{'disabled-btn': isSubmitting}">
				<text class="font_5 text_12" v-if="!isSubmitting">提交申请</text>
				<text class="font_5 text_12" v-else>提交中...</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		comApply
	} from '@/api/extend.js';

	export default {
		components: {},
		props: {},
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					chamberName: '',
					address: '',
					message: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名'
					}],
					phone: [{
						required: true,
						message: '请输入手机号'
					}],
					chamberName: [{
						required: true,
						message: '请输入商(协)会名称'
					}],
					address: [{
						required: true,
						message: '请选择地址'
					}]
				},
				isSubmitting: false
			};
		},
		computed: {
			...configMap({}, mapGetters(['isLogin', 'uid', 'userInfo']))
		},
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: this.title || '',
				path: `pages/extend/chamber/create_chamber?uid=${this.uid || -1}`,
			}
		},
		// onShareTimeline: function() {
		// 	return {
		// 		title: this.title || '',
		// 		query: {
		// 			uid: this.uid,
		// 		},
		// 		imageUrl: ''
		// 	}
		// },
		// #endif
		methods: {
			submitForm() {
				// 防止重复提交
				if (this.isSubmitting) return;

				// 表单验证
				if (!this.formData.name || !this.formData.phone || !this.formData.chamberName || !this.formData.address) {
					uni.showToast({
						title: '请填写必填项',
						icon: 'none'
					});
					return;
				}

				// 设置提交状态为true
				this.isSubmitting = true;

				// 准备要提交的数据，字段名与API需要的参数对应
				const submitData = {
					name: this.formData.name,
					phone: this.formData.phone,
					unit_name: this.formData.chamberName,
					unit_address: this.formData.address,
					remark: this.formData.message || ''
				};

				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});

				// 调用API提交数据
				comApply(submitData).then(res => {
					uni.hideLoading();
					this.isSubmitting = false; // 重置提交状态

					if (res.status === 200) {
						// 提交成功后清除暂存数据
						uni.removeStorage({
							key: 'chamber_temp_formC',
							success: () => {
								uni.showToast({
									title: '提交成功',
									icon: 'success',
									success: () => {
										// 提交成功后跳转到其他页面
										setTimeout(() => {
											uni.navigateBack();
										}, 1500);
									}
								});
							}
						});
					} else {
						uni.showToast({
							title: res.msg || '提交失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					this.isSubmitting = false; // 重置提交状态
					console.error('提交失败:', err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},

			saveTemp() {
				console.log('暂存表单:', this.formData);
				// 将表单数据保存到本地存储
				uni.setStorage({
					key: 'chamber_temp_formC',
					data: this.formData,
					success: () => {
						uni.showToast({
							title: '暂存成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						console.error('暂存失败:', err);
						uni.showToast({
							title: '暂存失败',
							icon: 'none'
						});
					}
				});
			}
		},

		onLoad() {
			if (!this.isLogin) {
				toLogin();
				return
			}
			// 页面加载时检查是否有暂存的表单数据
			uni.getStorage({
				key: 'chamber_temp_formC',
				success: (res) => {
					console.log('获取到暂存数据:', res.data);
					if (res.data) {
						// 确保所有必要的字段都存在
						const tempData = {
							name: res.data.name || '',
							phone: res.data.phone || '',
							chamberName: res.data.chamberName || '',
							address: res.data.address || '',
							message: res.data.message || ''
						};
						this.formData = tempData;
						console.log('暂存数据已加载到表单:', this.formData);

					} else {
						console.log('暂存数据为空');
					}
				},
				fail: (err) => {
					console.error('获取暂存数据失败:', err);
					// uni.showToast({
					//   title: '加载暂存数据失败',
					//   icon: 'none',
					//   duration: 2000
					// });
				}
			});
		},
	};
</script>

<style scoped lang="css">
	.ml-11-5 {
		margin-left: 23rpx;
	}

	.ml-6-5 {
		margin-left: 13rpx;
	}

	.mt-89-5 {
		margin-top: 179rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.page {
		background-color: #f2f2f2;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 36rpx;
	}

	.section {
		padding: 0 25rpx;
		background-color: #c40001;
		box-shadow: 0rpx 2rpx 4rpx #00000026;
	}

	.group_2 {
		padding: 104rpx 0 24rpx;
		width: 238rpx;
	}

	.image_6 {
		width: 48rpx;
		height: 48rpx;
	}

	.group_3 {
		width: 213.92rpx;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 0;
	}

	.image {
		width: 177rpx;
		height: 177rpx;
	}

	.text {
		color: #ffffff;
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		line-height: 22.76rpx;
		letter-spacing: -0.6rpx;
	}

	.pos_7 {
		position: absolute;
		left: 0;
		top: 41.08rpx;
	}

	.image_2 {
		margin-right: 129rpx;
		width: 158rpx;
		height: 200rpx;
	}

	.section_3 {
		filter: blur(30rpx);
		background-image: url('https://yjgs.jsonbug.com/storage/default/20250312/f55c5ef6626f7558b3fdb8f4860d6dbe.png');
		background-size: 100% 100%;
		height: 210rpx;
	}

	.pos_3 {
		position: absolute;
		left: 481rpx;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_2 {
		background-color: #ff26260a;
		filter: blur(30rpx);
		border-radius: 0 0 50% 50%;
		height: 196rpx;
	}

	.pos_2 {
		position: absolute;
		left: 331rpx;
		right: 189rpx;
		top: 0;
	}

	.section_4 {
		padding: 11rpx 25rpx 14rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos_8 {
		position: absolute;
		right: 12rpx;
		top: 100rpx;
	}

	.image-wrapper {
		width: 37rpx;
	}

	.image_9 {
		width: 37rpx;
		height: 13rpx;
	}

	.section_5 {
		background-color: #ffffff33;
		width: 1rpx;
		height: 37rpx;
	}

	.image_7 {
		width: 34rpx;
		height: 34rpx;
	}

	.image_4 {
		width: 49rpx;
		height: 22.68rpx;
	}

	.pos_5 {
		position: absolute;
		right: 28.34rpx;
		top: 34rpx;
	}

	.image_3 {
		width: 31rpx;
		height: 22rpx;
	}

	.pos_4 {
		position: absolute;
		right: 87rpx;
		top: 34rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 21rpx;
	}

	.pos_6 {
		position: absolute;
		right: 128rpx;
		top: 36rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.62rpx;
		color: #333333;
	}

	.text_2 {
		color: #ffffff;
		line-height: 29.86rpx;
	}

	.pos_9 {
		position: absolute;
		left: 50%;
		bottom: 70.14rpx;
		transform: translateX(-50%);
	}

	.image_8 {
		width: 16rpx;
		height: 16rpx;
	}

	.pos_10 {
		position: absolute;
		left: 50%;
		bottom: 80rpx;
		transform: translateX(-50%);
	}

	.section_6 {
		margin: 0 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.group_4 {
		padding: 33rpx 0 44rpx;
	}

	.image_10 {
		width: 8rpx;
		height: 28rpx;
	}

	.text_3 {
		color: #000000;
		line-height: 30.14rpx;
	}

	.group_5 {
		padding: 0 10rpx;
	}

	.divider {
		margin: 0 5rpx;
		background-image: repeating-linear-gradient(90deg, #00000080, #00000080 0.29%, transparent 0.29%, transparent 0.584%);
		background-position: -1rpx 0rpx;
		height: 0.5rpx;
	}

	.group_6 {
		padding: 30rpx 0 10rpx;
	}

	.section_7 {
		margin: 0 5rpx;
		padding: 30rpx 20rpx 30rpx 22rpx;
		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}

	.group_7 {
		line-height: 29.5rpx;
		height: 29.5rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 10.4rpx;
		color: #c50415;
	}

	.text_4 {
		line-height: 29.5rpx;
	}

	.text-wrapper {
		padding: 10rpx 0 14rpx;
		border-radius: 6rpx;
		width: 351rpx;
		height: 61rpx;
		border-left: solid 1rpx #666666;
		border-right: solid 1rpx #666666;
		border-top: solid 1rpx #666666;
		border-bottom: solid 1rpx #666666;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.74rpx;
		color: #999999;
	}

	.text_5 {
		margin-left: 12rpx;
	}

	.group_8 {
		line-height: 29.62rpx;
		height: 29.62rpx;
	}

	.font_4 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 10.4rpx;
		color: #d60000;
	}

	.group_9 {
		line-height: 29.6rpx;
		height: 29.6rpx;
	}

	.text_6 {
		line-height: 29.6rpx;
	}

	.text_7 {
		line-height: 25.76rpx;
	}

	.group_10 {
		line-height: 29.54rpx;
		height: 29.54rpx;
	}

	.text_8 {
		line-height: 29.54rpx;
	}

	.section_8 {
		margin: 0 4rpx;
		padding: 30rpx 21rpx 8rpx 24rpx;
		background-color: #ffffff;
		border-top: solid 0.5rpx #00000026;
	}

	.text_9 {
		margin-top: 8rpx;
		color: #000000;
		line-height: 25.82rpx;
	}

	.group_11 {
		border-radius: 6rpx;
		width: 126rpx;
		height: 59rpx;
	}

	.section_9 {
		padding: 10rpx 0 20rpx;
		background-color: #ffffff;
	}

	.text-wrapper_2 {
		margin: 0 25rpx;
		padding: 20rpx 0rpx 0rpx 0rpx;
		background-color: #f2f2f2;
		border-radius: 6rpx;
	}

	.font_5 {
		font-size: 26rpx;
		font-family: SourceHanSansCN;
		line-height: 23.88rpx;
		color: #ffffff;
	}

	.text_10 {
		margin-left: 20rpx;
		color: #666666;
	}

	.section_10 {
		padding: 26rpx 60rpx;
		background-color: #ffffff;
		filter: drop-shadow(5rpx -1rpx 6.5rpx #0000000d);
	}

	.text-wrapper_3 {
		padding: 28rpx 0;
		background-color: #0f0a00;
		border-radius: 10rpx;
		width: 300rpx;
		height: 78rpx;
	}

	.text_11 {
		line-height: 24rpx;
	}

	.text-wrapper_4 {
		padding: 28rpx 0;
		background-color: #2a82e4;
		border-radius: 10rpx;
		width: 300rpx;
		height: 78rpx;
	}

	.text_12 {
		line-height: 23.9rpx;
	}

	/* 添加输入框中实际输入的文本样式 */
	input,
	textarea {
		color: #000000 !important;
		font-weight: 500 !important;
	}

	/* 增加更具体的选择器 */
	.bb input,
	.bb textarea {
		color: #000000 !important;
		font-weight: 500 !important;
	}

	/* 针对表单内每个输入框单独设置样式 */
	.section_7 input,
	.section_9 textarea {
		color: #000000 !important;
		font-weight: 500 !important;
	}

	/* 禁用按钮样式 */
	.disabled-btn {
		opacity: 0.7;
		background-color: #74a4e5 !important;
		pointer-events: none;
	}
</style>